<template>
	<view>
		<view class="head-wrap" @click="chooseImage">
			<image :src="userForm.avatar?userForm.avatar:'/static/commen/headImg1.png'" mode="aspectFill"
				class="head-img"></image>
			<view class="head-mask yf-flex-center yf-flex-vertical">
				<image src="/static/commen/headIcon.png" mode="aspectFill" class="head-icon"></image>
				更换头像
			</view>
		</view>
		<view class="content">
			<view class="user-item yf-flex-left">
				<view class="item-title">
					昵称
				</view>
				<view class="item-info" @click="inputDialogToggle">
					{{userForm.nickName}}
				</view>
				<uni-icons type="right" size="14" color="#7A7A7A"></uni-icons>
			</view>
			<view class="user-item yf-flex-left">
				<view class="item-title">
					性别
				</view>
				<picker @change="sexPickerChange" :value="sexIndex" :range="sexArray" class="item-info">
					{{sexArray[sexIndex]}}
				</picker>
				<uni-icons type="right" size="14" color="#7A7A7A"></uni-icons>
			</view>
			<view class="user-item yf-flex-left">
				<view class="item-title">
					所属门店
				</view>
				<view class="item-info">
					{{userForm.store?userForm.store:'未认证'}}
				</view>
			</view>
			<view class="user-item yf-flex-left">
				<view class="item-title">
					简介
				</view>
				<view class="item-info" :style="{color: userForm.profile?'':'#939393'}" @click="profileToggle">
					{{userForm.profile?userForm.profile:'添加介绍，让大家认识你...'}}
				</view>
				<uni-icons type="right" size="14" color="#7A7A7A"></uni-icons>
			</view>
		</view>
		<!-- 输入框示例 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="昵称" :value="userForm.nickName" placeholder="请输入修改的昵称"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="profileDialog" type="dialog">
			<uni-popup-dialog ref="profileClose" mode="input" title="简介" :value="userForm.profile"
				placeholder="添加介绍，让大家认识你..." @confirm="profileConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	import indexConfig from "@/config/index.config.js";
	export default {
		data() {
			return {
				// 性别
				sexArray: ['男', '女', '保密'],
				sexIndex: 0,
				userForm: {},
				imagePath: "", //图片临时路径
			};
		},
		onLoad() {
			this.sexIndex = this.userInfo.sex > 0 ? Number(this.userInfo.sex) - 1 : 2
			this.userForm = JSON.parse(JSON.stringify(this.userInfo))
		},
		computed: {
			...mapState(['userInfo']),
			...mapGetters(['hasLogin'])
		},
		methods: {
			...mapMutations(['SET_LOGOUT', 'SET_USERINFO']),
			...mapActions(['UPDATA_USER_INFO']),
			// 选择图片
			chooseImage() {
				uni.chooseImage({
					count: 1, // 最多选9张
					sizeType: ['compressed'], // 可以指定是原图还是压缩图
					sourceType: ['album', 'camera'], // 从相册或相机选择
					success: (res) => {
						this.imagePath = res.tempFilePaths[0];
						this.uploadImages() //图片文件上传
						console.log(res, "imagePathres")
					},
					fail: (err) => {
						console.error('选择图片失败', err);
					}
				});
			},
			// 上传所有图片
			async uploadImages() {
				if (!this.imagePath) return;
				this.$api.showLoading()
				try {
					const result = await this.uploadFile(this.imagePath, 'image');
					console.log('图片上传成功', result);
					this.userForm.avatar = result.data.url
					this.setUserInfo()
				} catch (err) {
					console.error('图片上传失败', err);
					uni.showToast({
						title: '上传失败',
						icon: 'error'
					});
				} finally {
					this.$api.hideLoading()
				}
			},

			// 通用上传方法
			uploadFile(filePath, fileType) {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: indexConfig.baseUrl + 'cos/upload', // 替换为你的后端接口
						filePath: filePath,
						name: 'file', // 后端接收的字段名，如 $_FILES['file']
						formData: {
							type: fileType // 可选：传递额外参数
						},
						success: (res) => {
							if (res.statusCode === 200) {
								console.log(res.data, "res.data")
								const data = JSON.parse(res.data);
								resolve(data);
							} else {
								reject(new Error('服务器返回错误'));
							}
						},
						fail: (err) => {
							reject(err);
						}
					});
				});
			},
			/**
			 * 性别
			 * @param {Object} e
			 */
			sexPickerChange(e) {
				this.sexIndex = e.detail.value;
				this.userForm.sex = Number(e.detail.value) + 1;
				this.setUserInfo()
			},
			inputDialogToggle() { //不合理审核
				this.$refs.inputDialog.open()
			},
			dialogInputConfirm(val) {
				if (!val) {
					this.$api.msg('请输入修改的姓名')
					return
				}
				this.userForm.nickName = val;
				this.setUserInfo()
			},
			profileToggle() { //简介
				this.$refs.profileDialog.open()
			},
			profileConfirm(val) {
				if (!val) {
					this.$api.msg('请输入简介')
					return
				}
				this.userForm.profile = val;
				this.setUserInfo()
			},
			setUserInfo() {
				let that = this
				that.$api.showLoading()
				that.$apis
					.updateUser(
						this.userForm
					)
					.then(result => {
						if (result.code == 200) {
							that.$api.msg('修改成功')
							that.UPDATA_USER_INFO()
						}
					})
					.catch(err => {
						setTimeout(() => {
							that.$api.hideLoading()
						}, 1500)
					});
			},
		}
	}
</script>

<style lang="scss">
	.head-wrap {
		width: 180rpx;
		height: 180rpx;
		position: relative;
		border-radius: 50%;
		margin: 34rpx auto;

		.head-img {
			width: 180rpx;
			height: 180rpx;
			border-radius: 50%;
		}

		.head-mask {
			position: absolute;
			left: 0;
			top: 0;
			width: 180rpx;
			height: 180rpx;
			border-radius: 50%;
			background: rgba(0, 0, 0, 0.5);
			font-size: 28rpx;
			color: #FFFFFF;

			.head-icon {
				margin-bottom: 10rpx;
				width: 50rpx;
				height: 50rpx;
			}
		}
	}

	.content {
		padding: 0 30rpx;
		width: 100%;

		.user-item {
			border-bottom: 2rpx solid #F3F5F9;
			height: 116rpx;

			.item-title {
				width: 192rpx;
				font-size: 28rpx;
				color: #666666;
			}

			.item-info {
				flex: 1;
				font-size: 28rpx;
				color: #1B2125;
				padding-right: 10rpx;
				line-height: 116rpx;
			}
		}

	}
</style>